<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- accordion </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../production/primeui-1.0-min.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
	</head>

	<body ng-controller="MainCtrl">

	<h2>Default</h2>
	<div pui-accordion="{}" data-outer="outer">
		<div pui-accordion-pane="" title="T1">
			{{outer.val}}
		</div>
		<div pui-accordion-pane="" title="T2">
			{{outer.val2}}
		</div>
	</div>

	<h2>Multiple</h2>
	<div pui-accordion="{multiple: true, activeIndexList: [0, 1]}" data-outer="outer">
		<div pui-accordion-pane="" title="T1">
			{{outer.val}}
		</div>
		<div pui-accordion-pane="" title="T2">
			{{outer.val2}}
		</div>
	</div>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="underscore.min.js"></script>
	<script language="javascript">
	var md = angular.module('md', []);

	md.directive('puiAccordion', function(){
		return {
			scope: {
				outer: '='
			}, 

			transclude: true, 

			templateUrl: 'tpl/accordion.html', 

			controller: function($scope, $element, $attrs){
				var opts = $scope.$eval($attrs.puiAccordion) || {};
				var multiple = !!opts.multiple;
				var activeIndexList = opts.activeIndexList || [opts.activeIndex || 0];

				var panes = $scope.panes = [];

				this.focus = function(pane){
					if(!multiple){
						_.each(panes, function(it){
							it.isShow = false;
						});
					}
					pane.isShow = true;
				};

				this.add = function(pane){
					panes.push(pane);
					if(panes.length == 1){
						pane.isFirst = true;
					}
					if(activeIndexList.indexOf(panes.length - 1) >= 0){
						pane.isShow = true;
					}
				};
			}
		};
	});

	md.directive('puiAccordionPane', function(){
		return {
			require: '^puiAccordion',

			scope: {
				title: '@'
			}, 
			transclude: true, 

			templateUrl: 'tpl/accordion-pane.html', 

			link: function(scope, el, attrs, ctrl){
				ctrl.add(scope);

				scope.changeAsCurrent = function(){
					var isShow = scope.isShow = !scope.isShow;
					if(isShow){
						ctrl.focus(scope);
					}
				};
			}
		};
	});
	
	// ******************
	md.controller('MainCtrl', function($scope){
		$scope.outer = {
			val: 'xxx', 
			val2: 'yyy'
		};
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>